<template>
  <div class="button-input">
    <el-input
      :value="value"
      @input="onInput"
      v-show="visibleOfInput"
      @change="onChange"
      @blur="onBlur"
      ref="input"
      :size="size"
    ></el-input>
    <el-button v-show="!visibleOfInput" @click="onClickBtn" :size="size">
      <slot>+ New Tag</slot>
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'ButtonInput',
  props: {
    value: String,
    size: String,
  },
  data() {
    return {
      // 控制输入框是否显示
      visibleOfInput: false,
    };
  },
  methods: {
    onBlur() {
      this.visibleOfInput = false;
    },
    onChange(value) {
      this.visibleOfInput = false;
      this.$emit('change', value);
    },
    onInput(value) {
      this.$emit('input', value); // 支持v-model指令
    },
    onClickBtn() {
      // 显示输入框
      this.visibleOfInput = true;
      // 数据变了，视图马上会变吗？  不会，因为Vue有一个编译过程（异步）
      // 这个$nextTick的回调函数，会等待Vue把视图编译完成后再调用（异步）
      this.$nextTick(() => {
        // 先等输入框显示出来后，再获取焦点
        this.$refs.input.focus();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.button-input {
  display: inline-block;
  .el-input {
    width: 120px;
  }
}
</style>
